<template>
    <view class="container">
        <view class="head">
            <view class="head-type">
                {{ reportStatusList[info.reportStatus] }}
            </view>
            <view class="head-describe">
                {{info.reportStatus==0?'案件需要及时受理，请尽快跟踪处理!':info.reportStatus==1? '案件已核实，需提交资料到保险公司，等待保险公司审核处理!':
              info.reportStatus==2?'保险公司审核通过，并已赔付保险金额!':info.reportStatus==3?'案件未审核通过，已驳回案件!':info.reportStatus==4?'案件已由当事人撤销':''}}
            </view>
        </view>
        <view class="body">
            <view class="title">
                报案信息
            </view>
            <view class="body-bg">
                <view class="bg-i row">
                    <view class="row-left">出险人姓名：</view>
                    <view class="row-rignt">{{ info.outDangerUserName }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">出险人手机号：</view>
                    <view class="row-rignt">{{ info.outDangerPhone }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">报案人手机号：</view>
                    <view class="row-rignt">{{ info.reportPhone }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">出险时间：</view>
                    <view class="row-rignt">{{ info.outDangerDate }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">出险地点：</view>
                    <view class="row-rignt">{{ info.outDangerPlace }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">身份证号：</view>
                    <view class="row-rignt">{{ info.outDangerIdCardNo }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">录入时间：</view>
                    <view class="row-rignt">{{ info.createTime }}</view>
                </view>
            </view>
            <view class="title">
                赔款金额
            </view>
            <view class="body-bg">
                <view class="bg-i row">
                    <view class="row-left">预计金额：</view>
                    <view class="row-rignt">{{ info.estimateMoney || '暂无' }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">最终金额：</view>
                    <view class="row-rignt">{{ info.finalMoney || '暂无' }}</view>
                </view>
            </view>
            <view class="title">
                投保信息
            </view>
            <view class="body-bg">
                <view class="bg-i row">
                    <view class="row-left">投保方案：</view>
                    <view class="row-rignt">{{ info.companyPlanName }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">投保日期：</view>
                    <view class="row-rignt">{{ info.insurStartTime }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">劳务公司：</view>
                    <view class="row-rignt">{{ info.companyName }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">被派遣单位：</view>
                    <view class="row-rignt">{{ info.serveCompanyName }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">工种：</view>
                    <view class="row-rignt">{{ info.occupationName }}({{ info.occupationLevel }}类)</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">被派遣日期：</view>
                    <view class="row-rignt">{{ info.insurStartTime }}</view>
                </view>
            </view>
            <view class="title">
                事故详情
            </view>
            <view class="body-bg">
                <view class="bg-i row align-start-flex">
                    <view class="row-left">事故经过：</view>
                    <view class="row-rignt">{{ info.accidentDetails }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">事故类型：</view>
                    <view class="row-rignt">{{ info.accidentType ? '意外' : '工伤' }}</view>
                </view>
                <view class="bg-i row">
                    <view class="row-left">严重伤情：</view>
                    <view class="row-rignt">{{ info.hurtStatus ? '是' : '不是' }}</view>
                </view>
                <view class="bg-i row align-start-flex">
                    <view class="row-left">报案材料：</view>
                    <view class="row-rignt">
                        <div class="enclosure-i flex" v-for="(item,index) in info?.params?.fileUrl" :key="index" @click="onSeeFile(item.fileUrl,item.fileType,item.id)">
                            <view class="enclosure-title">
                                附件
                            </view>
                            <img src="../../static/new-build/more.png" class="enclosure-tips" alt="">
                            <video
                                :id="'myvideo'+item.id"
                                :src="videoUrl"
                                v-show="fullScreen === item.id && item.fileType === 'video'"
                                @fullscreenchange="fullscreenchange"
                                controls auto-pause-if-navigate autoplay />
                        </div>
                    </view>
                </view>
            </view>
            <view class="title-box row">
                <view class="title">
                    案件进展
                </view>
                <view class="inform-btn" v-if="!info.isInform && info.reportStatus === 0" @click="onIsPoput(info.id,info.insuranceType)" >
                    销售已告知
                </view>
            </view>
            <view class="body-bg">
                <view class="bg-i row align-start-flex" v-if="info?.reportCaseResultList?.length === 0">
                    <view class="row-left flex align-flex">
                        <view class="bg-tdecorate"></view>
                        <view>
                            暂无
                        </view>
                    </view>
                    <view class="row-rignt"></view>
                </view>
                <!-- <view class="bg-i row align-start-flex" v-for="(item,index) in info?.reportCaseResultList" :key="index">
                    <view class="row-left row-rignt-active ">
                        <view class="flex align-flex">
                            <view class="bg-tdecorate"></view>
                            <view>
                                {{ item.createTime }}
                            </view>
                        </view>
                        <view>
                            <view>
                                {{ item.remark }}
                            </view>
                        </view>
                    </view>
                </view> -->
                <view class="bg-i row align-start-flex" v-for="(item,index) in info?.reportCaseResultList" :key="index">
                    <view class="row-left row-rignt-active ">
                        <view class="flex align-flex">
                            <!--  -->
                            <view :class="['bg-tdecorate ', index > 0 ? 'bg-tdecorate-active' : '']"></view>
                            <view>
                                {{ item.createTime }}
                            </view>
                        </view>
                        <view :class="[index < (info?.reportCaseResultList?.length -1) ? 'i-remark-box' : '' ]">
                            <view class="i-remark">
                                {{ item.remark }}
                            </view>
                        </view>
                    </view>
                    <!-- <view class="row-rignt"></view> -->
                </view>
            </view>
        </view>
        <view class="foot-btn">
            <button class="long-btn" @click="onPhone">
                电话联系
            </button>
        </view>
    </view>
    <popup v-if="isPopup" title="提示" cancel @cancel="onCancel">
        <div class="popup-box">
            <div>是否确定您已跟客户进行过对接，并告知其所需要提交的资料？</div>
            <div class="row btn-box">
                <button @click="onCancel" class="short-btn white">取消</button>
                <button  class="short-btn blue" @click="onDetermine">确定</button>
            </div>
        </div>
    </popup>
</template>
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import componentTab from '@/components/tab/tab.vue'
import { getReportDetail, ReportDetailDto, saleNotice } from '@/api/reminder'
import popup from '@/components/popup/popup.vue'
const id = ref()
const typeId = ref()
const info = ref({} as ReportDetailDto)
const fullScreen = ref()
const videoUrl = ref('')
const isPopup = ref(false)
const companyId = ref()
const caseId = ref()
const reportStatusList = ref(['待受理', '处理中', '已结案', '已驳回', '已撤销'])
// 开启弹窗
const onIsPoput = async (id:number, type:number) => {
    console.log(id, type)
    caseId.value = id
    typeId.value = type
    isPopup.value = true
}
// 弹窗关闭回调
const onCancel = () => {
    isPopup.value = false
}
// 弹窗点击确定
const onDetermine = async () => {
    onCancel()
    await saleNotice({
        id: caseId.value,
        insuranceType: typeId.value
    })
    getReportDetailInfo()
    uni.showToast({
        title: '通知成功',
        icon: 'none'
    })
    // 调用接口
}
onLoad((options) => {
    console.log(options, 'options')
    id.value = options.id
    typeId.value = options.type
    companyId.value = options.cid
    getReportDetailInfo()
    console.log(id.value, typeId.value)
})
const getReportDetailInfo = async () => {
    const result = await getReportDetail({
        id: id.value,
        insuranceType: typeId.value
    })
    info.value = result
    console.log(result, 'result')
}
const onSeeFile = (url:string, type:string, id:number) => {
    console.log(url, type, '路径')
    if (type === 'photo') {
        uni.previewImage({
            urls: [url]
        })
    } else {
        fullScreen.value = id
        videoUrl.value = url
        const videoContext = uni.createVideoContext('myvideo' + id)
        videoContext.requestFullScreen()
    }
}
const fullscreenchange = (event:{target:{fullScreen:boolean}}) => {
    if (event.target.fullScreen) {
        return
    }
    console.log(event, 'event')
    const videoContext = uni.createVideoContext('myVideo' + fullScreen.value) // 暂停播放
    videoContext.pause()
    fullScreen.value = 0
    console.log('触发啦')
}

const onPhone = () => {
    uni.makePhoneCall({
        phoneNumber: info.value.reportPhone
    })
}
</script>
<style lang="scss" scoped>
.container {
    // min-height: 100vh;
    background: #fafafc;
    padding-bottom: 150rpx;
}
.head{
    background-color: #3E5FF5;
    padding: 30rpx;
    .head-type{
        color: #FFFFFF;
        font-size: $font-large;
        font-weight: bold;
    }
    .head-describe{
        color: rgba(255, 255, 255, 0.7500);
        font-size: $font-normal;
        margin-top: 16rpx;
    }
}
.body{
    padding: 0 30rpx;
    padding-bottom: 30rpx;
    .title{
        margin-top: 30rpx;
        color: $black;
        font-size: $font-medium;
        font-weight: normal;
    }
    .body-bg{
        margin-top: 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        padding: 1rpx 30rpx;
    }
    .bg-i{
        margin: 24rpx 0;
    }
    .row-left{
        color: $grey;
        font-size: $font-normal;
        flex: none;
        width: 210rpx;
    }
    .row-rignt{
        color: $black;
        font-size: $font-normal;
    }
    .row-rignt-active{
        width: 100%;
        align-items: baseline;
        .i-remark-box{
            border-left: 1rpx solid #EAEAEF;
            margin-left: 10rpx;
            min-height: 70rpx;
        }
        .i-remark{
            margin-left: 25rpx;
        }
    }
    .enclosure-title{
        color: #3E5FF5;
        font-size: $font-normal;
        margin-right: 15rpx;
    }
    .enclosure-tips{
        width: 36rpx;
        height: 36rpx;
    }
    .title-box{
        padding: 30rpx 0;
    }
    .inform-btn{
        width: 170rpx;
        height: 58rpx;
        text-align: center;
        line-height: 58rpx;
        border: 1rpx solid #DEE0E3;
        border-radius: 50rpx;
        font-size: $font-base;
        text-align: center;
        line-height: 58rpx;
        font-weight: bold;
    }
    .bg-tdecorate{
        width: 20rpx;
        height: 20rpx;
        background: #3E5FF5;
        margin-right: 16rpx;
        border-radius: 50%;
    }
    .bg-tdecorate-active{
        width: 12rpx;
        height: 12rpx;
        background-color: #DEE0E3;
        border-radius: 50rpx;
    }
}
.popup-box{
    padding: 0 60rpx;
}
.btn-box{
    margin-top: 50rpx;
}
</style>
